import { t } from 'i18next'
import { Modal } from '@kedacom/react-next'
import { StyledVmpPlanListModal, Tip } from './style'
import { SelectItem, Vmp } from '../interface'
import useService from './service'
import { Alert } from '@/components/Alert'
import { useVmpTypeStore } from '../store.get'
import { useManagerStore } from '../../main/manager/store'

export interface VmpPlanProps {
	disabled?: boolean
	getVmpParam?: () => Vmp | null
}
export interface PlanRef {
	getValue: () => SelectItem
}
const VmpPlanSelectModal = (props: VmpPlanProps) => {
	const { getVmpParam = () => null } = props
	const useStore = useVmpTypeStore((state) => state.getStore())
	const { isShowPlanOperateModal, vmpState } = useStore((state) => ({
		isShowPlanOperateModal: state.isShowPlanOperateModal,
		vmpState: state.vmpState,
	}))
	const {
		planOptions,
		/**选中预案 */
		selectPlan,
		// 关闭预案选择模态框
		handleCloseSelectPlanModal,
		/**临时选中的预案 */
		planTempValue,
		/**选中临时预案 */
		handleCheckPlan,
	} = useService({ getVmpParam })
	return (
		<>
			<Modal
				open={isShowPlanOperateModal}
				title={t('画面合成预案选择')}
				width={742}
				height={460}
				okText={vmpState === 1 ? t('应用') : t('开始画面合成')}
				onOk={() => {
					if (!planTempValue || planTempValue === '0') {
						Alert(t('请选择预案'))
						return false
					}
					const isMtVmp = useVmpTypeStore.getState().type !== 'vmp'
					if (isMtVmp) {
						let chairman = useManagerStore.getState().chairman
						if (!chairman?.mtKey) {
							Alert(t('请设置当前会议管理方'))
							return
						}
						if (!chairman.status.isOnline) {
							Alert(t('当前会议管理方已离线'))
							return
						}
						selectPlan()
					} else {
						selectPlan()
					}
				}}
				onCancel={handleCloseSelectPlanModal}
				cancelText={t('取消')}
			>
				{planOptions.length > 0 ? (
					<StyledVmpPlanListModal>
						<div className="slider-view">
							{planOptions.map((item) =>
								item.layout ? (
									<div className="style-box-item" key={item.value}>
										<div
											className={`style-box ${item?.className} ${
												item?.value === planTempValue ? 'select' : ''
											}`}
											onClick={() => {
												handleCheckPlan(item.value)
											}}
										></div>
										<div className="style-box-item-name">{item.label}</div>
									</div>
								) : (
									<div className="style-box-item" key={item.value}>
										<div
											className={`style-box-auto ${
												item?.value === planTempValue ? 'select' : ''
											}`}
											onClick={() => {
												handleCheckPlan(item.value)
											}}
										>
											<span>{t('自动')}</span>
										</div>
										<div className="style-box-item-name">{item.label}</div>
									</div>
								)
							)}
						</div>
					</StyledVmpPlanListModal>
				) : (
					<Tip>
						<s className="left"></s>
						<div className="text">{t('暂无预案')}</div>
					</Tip>
				)}
			</Modal>
		</>
	)
}
export default VmpPlanSelectModal
